<template>
    <div class="app-container">
        <h4 class="form-header h4">基本信息</h4>
        <el-form ref="form" :model="form" label-width="100px">
            <el-row>
                <el-col :span="4" >
                    <el-form-item label="用户昵称/姓名" prop="nickname">
                        <el-input v-model="form.nickname" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="4" >
                    <el-form-item label="登录账号" prop="username">
                        <el-input  v-model="form.username" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="手机号" prop="mobile">
                        <el-input  v-model="form.mobile" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="4" >
                    <el-form-item label="被邀请人" prop="spread_uid">
                        <el-select v-model="form.spread_uid" placeholder="请选择被邀请热" size="small" class="w120 mr-10"  >
                            <el-option v-for="(item, index) in userSelectList" :key="index"   :label="item.nickname+'('+item.mobile+')'" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4" >
                    <el-form-item label="片区" prop="water_role">
                        <el-select v-model="form.community_id" placeholder="请选择区片" size="small" class="w120 mr-10"  @change="changeCommunityWaterMachine">
                            <el-option v-for="(item, index) in communityList" :key="index" :label="item.title" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <h4 class="form-header h4">绑定水机信息</h4>
        <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="tableWater" @selection-change="handleSelectionChange" :data="waterDeviceData">
            <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
            <el-table-column   label="water_id" align="center" prop="water_id"  width="55" />
            <el-table-column label="水机名称"   prop="water_title" />
            <el-table-column label="水机编号" align="center" prop="code" />
            <el-table-column align="center" label="所属片区">
                <template slot-scope="{row}">
                    {{ row.community? row.community.title : "" }}
                </template>
            </el-table-column>
            <el-table-column label="地址" align="center" prop="address" />
        </el-table>


        <el-form label-width="100px">
            <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
                <el-button type="primary" @click="submitForm()">提交</el-button>
                <el-button @click="close()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { getAllCom } from "@/api/grzq/community.js";
import { detailBuyUsers,getUsersBuyWater, updateUsersBuyWater,getUsersBuySelectlists } from "@/api/grzq/user_buy";

import { getApparatusAllList } from "@/api/grzq/apparatus.js";

export default {
    name: "AuthRole",
    dicts:['sys_user_water_role'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 分页信息
            total: 0,
            pageNum: 1,
            pageSize: 10,
            // 选中角色编号
            userSelectList:[],
            communityList:[],
            waterDeviceData:[],
            waterIds:[],
            // 角色信息
            waters: [],
            // 用户信息
            form: {}
        };
    },
    created() {
        this.getAllCom()
        let userId = this.$route.query && this.$route.query.userId;
        if (userId) {
            this.loading = true;
            detailBuyUsers(userId).then((response) => {
                console.log("response",response)
                this.form = response.data.user;
                this.form.userId = userId;
                this.waters = response.data.user_with_water;
                this.waterDeviceData = response.data.water_list;
                this.$nextTick(() => {
                    this.waters.forEach((row) => {
                        this.$refs.tableWater.toggleRowSelection(row);
                    });
                });
                this.loading = false;
            });
        }
        this.UsersBuySelectlist()
    },
    methods: {
        // 片区
        async getAllCom() {
            const res = await getAllCom();
            this.communityList = res.data;
        },

        //获取列表
        async UsersBuySelectlist() {
            const {data, status, msg} = await getUsersBuySelectlists({'water_role':'buy'});
            this.userSelectList = data;
        },
        async changeCommunityWaterMachine(communityId){
            const res = await getApparatusAllList({community_id: communityId});
            this.waterDeviceData = res.data;
        },
        /** 单击选中行数据 */
        clickRow(row) {
            this.$refs.tableWater.toggleRowSelection(row);
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.waterIds = selection.map((item) => item.water_id);
        },
        // 保存选中的数据编号
        getRowKey(row) {
            return row.id;
        },
        /** 提交按钮 */
        submitForm() {
            const userId = this.form.userId;
            const water_role = this.form.water_role;
            const apparatuses_ids = this.waterIds;
            updateUsersBuyWater({ user_id: userId,water_role: water_role, waterIds: apparatuses_ids }).then((response) => {
                this.msgSuccess("授权成功");
                this.close();
            });
        },
        /** 关闭按钮 */
        close() {
            const obj = { path: "/member" };
            this.$router.go(-1);
        },
    },
};
</script>
